<template>

  <!-- 安徽地图 -->

  <div id="main" ref="anHuiMap" style="width: 500px; height:500px" />

</template>

<script>
import * as echarts from 'echarts'
import anHuiMap from '@/json/geojson-master/echarts/province/anhui.json'
export default {
  mounted() {
    echarts.registerMap('anHuiMap', anHuiMap)
    this.drawLine()
  },
  methods: {

    // 开始画图了
    drawLine() {
    //   const vm = this
      const myChart = echarts.init(this.$refs.anHuiMap)

      const option = {
        geo: {
          type: 'map', // 字符串
          map: 'anHuiMap', //  anHuiMap要和  registerMap这个函数里的名字保持一致
          roam: true, // 拖动缩放
          zoom: 1.2, // 初始缩放比列为1.2
          label: {
            show: true // 显示地图上的标签
          }
          //   以六安市为中心点
        //   center: [116.507676, 31.752889] // 坐标可以通过地图矢量数据获取到
        },
        // 标题
        title: {
          // text: 'XXXXXXXX',
          subtext: '安徽省分布图',
          left: 'right'
        }
        // 提示框
        // tooltip: {
        //   trigger: 'item',
        //   showDelay: 0,
        //   transitionDuration: 0.2,
        //   formatter: function(params) {
        //     let value = (params.value + '').split('.')
        //     value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
        //     return params.seriesName + '<br/>' + params.name + ': ' + value
        //   }
        // }

      }

      myChart.setOption(option)
    //   this.map.on('click', function(v) {
    //     console.log(v)
    //   })
    }
  }
}
</script>
<style scoped>
#main {
    border: 1px solid green;
}
</style>
